<template>
  <!-- 推广分享弹框 -->
  <Modal v-model="sharePop" class-name="vertical-center-modal" :mask-closable="false" :closable="false" width="500">
    <div slot="header" class="head-sty">
      <div class="title">{{ $t('promote.share_tit_text') }}</div>
      <Icon type="md-close" class="close" color="#000000" @click="sharePop = !sharePop" />
    </div>
    <div class="content">
      <div class="sub-tit">{{ $t('promote.share_sub_tit') }}</div>
      <div class="link-info">
        {{ shareLink }}
        <Icon type="ios-copy" color="#767B93" size="20" class="copy-icon" @click="copyLink()" />
      </div>
      <div class="tip-text">{{ $t('promote.share_rules_text') }}</div>
    </div>
    <div slot="footer"></div>
  </Modal>
</template>
<script>
import { bigTimes } from "@/common/digital-computation";
import { getShareLink } from "@/api/product";
export default {
  props: ['info'],
  data() {
    return {
      bigTimes,
      sharePop: false,
      shareLink: '',
    }
  },
  methods: {
    open(info) {
      getShareLink(info).then((res) => {
        this.shareLink = res.result;
        this.sharePop = true;
      })
    },
    copyLink() {
      navigator.clipboard.writeText(this.shareLink).then(() => {
        this.$Message.success(this.$t("public.copySuccess"));
      }).catch(() => {
        this.$Message.error(this.$t("public.copyFail"));
      });
    },
  }
}
</script>

<style lang="less" scoped>
:deep(.ivu-modal-content) {
  border-radius: 16px;

  .ivu-modal-header {
    border: none;
    padding: 32px;
  }

  .ivu-modal-body {
    padding: 0 32px 32px 32px;
  }

  .ivu-modal-footer {
    border: none;
    padding: 0;
  }
}

.vertical-center-modal {
  font-family: Open Sans, Open Sans;
  display: flex;
  align-items: center;
  justify-content: center;

  .head-sty {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title {
      font-weight: 600;
      font-size: 28px;
      color: #1E1714;
      line-height: 38px;
    }

    .close {
      font-size: 38px;
      cursor: pointer;
    }
  }

  .content {
    .sub-tit {
      font-weight: 500;
      font-size: 22px;
      color: #1E1714;
      line-height: 26px;
    }

    .link-info {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 400;
      font-size: 18px;
      color: #767B93;
      line-height: 24px;
      margin-top: 17px;

      .copy-icon {
        cursor: pointer;
      }
    }

    .tip-text {
      font-weight: 400;
      font-size: 16px;
      color: #AEB0B9;
      line-height: 19px;
      margin-top: 21px;
    }
  }
}
</style>